<template>
  <div>
    <div class="bx1">
      <van-uploader :after-read="afterRead" />
      <form :style="{ height: formHeight }">
        <div id="count">
          账号：
          <input type="text" placeholder="请设置账号" v-model="account" />
          <p v-if="accountError" class="error">{{ accountError }}</p>
        </div>
        <div id="password">
          密码：
          <input type="password" placeholder="请设置密码" v-model="password" />
          <p v-if="passwordError" class="error">{{ passwordError }}</p>
          <van-radio-group v-model="isChecked">
            <van-radio name="1">
              <p @click="readXY">已阅读并同意<span>《用户协议》</span></p>
            </van-radio>
          </van-radio-group>
        </div>
        <button @click="formPost" :disabled="!isChecked">注册</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false,
      account: "",
      password: "",
      accountError: "",
      passwordError: "",
      formHeight: "260px",
    };
  },

  methods: {
    readXY() {
      this.$router.push("/deal");
    },
    afterRead(file) {
      console.log(file);
    },
    async formPost(event) {
      event.preventDefault();

      if (!this.isChecked) {
        return;
      }

      // 表单验证
      if (!this.validateForm()) {
        return;
      }

      const formData = {
        account: this.account,
        password: this.password,
      };

      let code = await this.$store.dispatch("user/registerAction", formData);

      if (code == 0) {
        this.isChecked = false;
        this.$router.replace("/login");
      }
    },
    validateForm() {
      this.clearErrors();

      let isValid = true;

      const accountRegex = /^[a-zA-Z][a-zA-Z0-9]*$/;
      if (accountRegex.test(this.account)) {
        this.accountError =
          "账号只能由数字和大小写字母组成，且不能以字母开头";
        isValid = false;
      } else if (this.account.trim().length === 0) {
        this.accountError = "账号不能为空";
        isValid = false;
      }

      const passwordRegex = /^[a-zA-Z][a-zA-Z0-9]*$/;
      if (passwordRegex.test(this.password)) {
        this.passwordError =
          "密码只能由数字和大小写字母组成，且不能以字母开头";
        isValid = false;
      } else if (this.password.trim().length === 0) {
        this.passwordError = "密码不能为空";
        isValid = false;
      }
      this.formHeight = isValid ? "260px" : "325px";
      return isValid;
    },
    clearErrors() {
      this.accountError = "";
      this.passwordError = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.bx1 {
  width: 100%;
  height: 100%;

  .van-uploader {
    position: relative;
    top: 100px;
    left: 150px;
  }
  form {
    width: 300px;
    height: 260px;
    background-color: rgb(212, 249, 212);
    position: relative;
    top: 100px;
    left: 40px;
    #count {
      position: relative;
      top: 30px;
      left: 15px;
      clear: both;
      input {
        width: 200px;
        height: 35px;
      }
      .error {
        width: 280px;
  color: red;
}
    }
    #password {
      position: relative;
      top: 50px;
      left: 15px;
      overflow: hidden;
      input {
        width: 200px;
        height: 35px;
        outline-style: none;
      }
      .error {
        width: 280px;
        color: red;
      }
    }
    .van-radio-group {
      display: block;
      margin-top: 25px;
      margin-left: 5px;
      -webkit-font-feature-settings: "kern";
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #aeaeae;
      span {
        color: #00cc99;
      }
    }
    button {
      // border-width: 0px;
      position: relative;
      left: 25px;
      top: 72px;
      width: 240px;
      height: 40px;
      background: inherit;
      background-color: rgba(69, 201, 147, 1);
      border: none;
      border-radius: 3px;
    }
  }
}
</style>
